<template>
  <div class="pug-tree">
    <ul class="ksdtreeul">
      <li @click.stop='expand(item)' v-for="(item,index) in list" :key="index">
        <div class='ksd-libox' :title='item.name'>
          <a href='javascript:void(0);' class='titc'>
            <span v-if="item.childrens && item.childrens.length > 0" class="pr5">
              <i class="iconfont icon-zhankai1 fz16" v-if="item.isexpand==1"></i>
              <i class="iconfont icon-zhankai fz16" v-else></i>
            </span>
            <span><input type="checkbox" @change.stop="selectNode(item)"></span>
            <span>{{(index + 1 < 10 ? '0' + (index + 1) : (index + 1)) }}、{{ item.name }}</span>
            <span v-if="item.childrens && item.childrens.length > 0">({{ item.childrens.length }})</span>
          </a>
        </div>

        <pug-tree v-show='item.isexpand == 1' @event="addNode" v-if="item.childrens" :list='item.childrens'></pug-tree>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    default:[]
  },
  name: "PugTree",
  data() {
    return {}
  },
  methods: {

    selectNode(item){
      console.log(item)
    },

    expand: function (obj) {
      obj.isexpand = obj.isexpand == 1 ? 2 :1;
    },
    addNode: function (item) {
      console.log(item);
    },
    editNode: function (item) {
      console.log(item);
    },
    delNode: function (item, index) {
      console.log(item, index)
    },
    lookNode: function (item) {
      console.log(item)
    }
  }
}
</script>

<style scoped>



.pug-tree ul.ksdtreeul  ul.ksdtreeul {
  margin-left: 15px;
  border-left: 1px dotted #c0c4cc;
}


.pug-tree ul.ksdtreeul li {
  line-height: 32px;
  padding-left: 18px;
}

.pug-tree ul.ksdtreeul li ul {
  margin-left: 30px;
}

.pug-tree a {
  font-size: 14px;
  margin-left: 7px;
  color: #636363;
}

.pug-tree a, .pug-tree span {
  vertical-align: top;
  color: #636363;
}

.pug-tree ul.ksdtreeul .ksd-libox a.titc {
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 360px
}

.pug-tree ul.ksdtreeul .ksd-libox:hover a.titc {
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.red ul {
  border-left-color: #eca6b4;
}

</style>
